<template>
  <div class="auto">
    <!-- <div style="text-align:center">欢迎</div>
    <div style="text-align:center">
      <span>{{orgCrumb}}</span>
      <img src="../../assets/mute.png" width="32" height="32" @click="mute"></img>
    </div> -->
    <route :comp="{name: 'void-page'}" name="repairman-router"></route>
    <footer class="navbar-default navbar-fixed-bottom">
    <div class="container-fluid" style="align:center">
      <table width="100%" height="30px" style="text-align:center" align="center">
        <tr>
          <td @click="go2('phone-state', 'repair')" width="20%">
            <table style="text-align:center">
              <tr>
                <th style="text-align:center"><span class="glyphicon glyphicon-user"></span></th>
              </tr>
              <tr>
                <th style="text-align:center">维修员状态</th>
              </tr>
            </table>
          <td>
          <td @click="go2('repair-area-list')" width="20%">
            <table style="text-align:center">
              <tr>
                <th style="text-align:center"><span class="glyphicon glyphicon-list-alt"></span></th>
              </tr>
              <tr>
                <th style="text-align:center">维修单</th>
              </tr>
            </table>
          <td>
          <td @click="go2('system-setting')" width="20%">
            <table style="text-align:center">
              <tr>
                <th style="text-align:center"><span class="glyphicon glyphicon-cog"></span></th>
              </tr>
              <tr>
                <th style="text-align:center">系统设置</th>
              </tr>
            </table>
          <td>
          <td @click="go2('check-notice')" width="20%">
            <table style="text-align:center">
              <tr>
                <th style="text-align:center"><span class="glyphicon glyphicon-bell"></span></th>
              </tr>
              <tr>
                <th style="text-align:center">通知公告</th>
              </tr>
            </table>
          <td>
          <td @click="go2('phone-book')" width="20%">
            <table style="text-align:center">
              <tr>
                <th style="text-align:center"><span class="glyphicon glyphicon-earphone"></span></th>
              </tr>
              <tr>
                <th style="text-align:center">通讯录</th>
              </tr>
            </table>
          <td>
        </tr>
      </table>
    </div>
    </footer>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  title: '维修员界面',
  data() {
    return {
      orgs : Vue.orgs
    }
  },
  computed: {
    orgCrumb: function() {
      let oc = []
      if(this.orgs) {
        this.orgs.filter((item) => {
          return item.level != 5
        }).forEach(function(org) {
            oc.push(org.name)
        })
      }
      return oc.join('--')
    }
  },
  ready() {
    this.go2('phone-state', 'repair')
  },
  methods: {
    go2: function(widget, param) {
      this.$goto(widget, {role: param}, 'repairman-router')
    },
    mute: function() {
      HostApp.mute()
    },
  },
}
</script>
